<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>



<!DOCTYPE html>
<html>

<head>
    <base href="/oa/" />
    <title>襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="${pageContext.request.contextPath}/static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
    <style>
        /*定义类名为.thead-blue的样式*/
        .thead-blue {
            color: #fff;
            font-weight: bold;
            background-color: #337ab7;
        }
    </style>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-1.10.2.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/echarts/echarts.js"></script>
</head>
<body>

<!-- 搜索 -->
<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">报销申请报表</h4>
    </div>
    <div class="panel-body">
        <form action="${pageContext.request.contextPath}/bx-informal/reportBxInformal" id="seachform" method="post"
              class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-md-5">
                    <label for="mode" class="col-md-4 control-label">统计类型</label>
                    <div class="col-md-8">
                        <select id="mode" name="mode" class="form-control">
                            <option value="dept" <c:if test="${mode == 'dept'}">selected</c:if>>按部门统计</option>
                            <option value="type" <c:if test="${mode == 'type'}">selected</c:if>>按类型统计</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-5">
                    <label for="type" class="col-md-4 control-label">图形类型</label>
                    <div class="col-md-8">
                        <select name="type" id="type" class="form-control">
                            <option value="pie" <c:if test="${type == 'pie'}">selected</c:if>>显示饼图</option>
                            <option value="bar" <c:if test="${type == 'bar'}">selected</c:if>>显示柱状图</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-5">
                    <label for="jobid" class="col-md-4 control-label">开始时间</label>
                    <div class="col-md-8">
                        <input type="date" id="startDate" name="startDate"
                               class="form-control"
                               value="${startDate}">
                    </div>
                </div>
                <div class="col-md-5">
                    <label for="endDate" class="col-md-4 control-label">结束时间</label>
                    <div class="col-md-8">
                        <input type="date" id="endDate" name="endDate"
                               class="form-control"
                               value="${endDate}">
                    </div>
                </div>

                <div class="col-md-2">
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-success">搜索统计</button>
                        <button type="button" class="btn btn-warning" id="cancelBtn" >取消搜索</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div>
    <div class="col-md-4">
        <!-- 列表 -->
        <div class="panel panel-primary">
            <table class="table table-bordered table-hover">
                <thead>
                <tr class="thead-blue" align="center">
                    <td>统计列表</td>
                    <td>报销金额</td>
                </tr>
                </thead>
                <tbody>

                <c:forEach items="${statisticsList}" var="item">
                    <tr align="center">
                        <td>${item.name}</td>
                        <td><fmt:formatNumber value="${item.amount}" pattern="0.0" /></td>
                    </tr>
                </c:forEach>

                </tbody>
            </table>
        </div>
    </div>
    <div class="col-md-8">
        <div id="chartpie" style="height: 380px;display: none;"></div>
        <div id="chartbar" style="height: 380px;display: none;"></div>
    </div>
</div>

<br>
<br>
<br>






<script type="text/javascript">
    $(document).ajaxError(function(event,xhr) {
        if(xhr.status=="403"){//没有权限
            document.location.href = xhr.getResponseHeader("url");
        }else if(xhr.status!="200"){
            //alert("服务器错误!");
            console.log("服务器错误!");
        }
    });
</script>


</body>
<script type="text/javascript">
    $(document).ready(function(){
        showReport();
        $("#cancelBtn").click(function(){
            $("#mode").val("dept");
            $("#type").val("pie");
            $("#startDate").val("");
            $("#endDate").val("");
            $("#seachform").submit();
        });
    });

    function showReport(){
        if($("#type").val()=='pie'){
            showPie();
        }else{
            showBar();
        }
    }

    function showPie(){
        $("#chartpie").show();
        $("#chartbar").hide();
        var charts = echarts.init($("#chartpie")[0]);
        $.getJSON("${pageContext.request.contextPath}/bx-informal/reportBxInformalPie",{"mode":$("#mode").val(),"startDate":$("#startDate").val(),"endDate":$("#endDate").val()},function(json){
            charts.setOption({
                title:{
                    text:$("#mode option:selected").text()+"报销情况"
                },
                tooltip: {},
                series:[{
                    type:"pie",
                    radius:"80%",
                    data:json,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3','#ff0000','#00ff00', '#0000ff'];
                                return colorList[params.dataIndex];
                            }
                        }
                    }
                }]
            });

        });
    }
    function showBar(){
        $("#chartbar").show();
        $("#chartpie").hide();
        var charts = echarts.init($("#chartbar")[0]);
        $.getJSON("${pageContext.request.contextPath}/bx-informal/reportBxInformalBar",{"mode":$("#mode").val(),"startDate":$("#startDate").val(),"endDate":$("#endDate").val()},function(json){
            charts.setOption({
                title:{
                    text:$("#mode option:selected").text()+"报销情况"
                },
                tooltip: {},
                xAxis: {
                    data: json.name
                },
                yAxis: {},
                series: [{
                    type: 'bar',//bar 柱状图
                    data: json.value,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3','#ff0000','#00ff00', '#0000ff'];
                                return colorList[params.dataIndex];
                            }
                        }
                    }
                }]

            });
        });
    }
</script>
</html>